<!--test.vue-->
<template>
  <div class="now-time">
    <!-- <i class="el-icon-time"></i>  -->
		<div class="day">{{day}}</div>
		<div class="time">{{time}}</div>
  </div>
</template>

<script>
	export default {
		name: 'NowTime',
    data(){
			return {
				defaultStyle: {
					height: 40
				},
				time: '',
				day:''
      }
    },
		filters: {
			getDate(value){
				return value.getDate()
			}
		},
		created() {
			this.getNowTime()
		},
		methods: {
			digit(value){
				return value<10?'0'+value:value
			},
			getNowTime() {
				this.timer = setInterval(()=> {
					const date = new Date()
					this.day  = `${date.getFullYear()}-${this.digit(date.getMonth()+1)}-${this.digit(date.getDate())}`
					this.time = `${this.digit(date.getHours())}:${this.digit(date.getMinutes())}:${this.digit(date.getSeconds())}`
				},1000)
			}
		},
		beforeDestroy () {
			this.timer && clearInterval(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
.day{
text-align: right;
font-size: 14px;
font-weight: bold;
}
.time{
text-align: right;
font-size: 26px;
font-weight: bold;
}
</style>
